<template>
<div>


	<myheader />

	<h1>我的文件列表</h1>

	<van-dropdown-menu>
		
		<van-dropdown-item :options="option1" v-model="mysort" @change="get_data" />


		<van-dropdown-item :options="option2" v-model="myorder" @change="get_data" />

	</van-dropdown-menu>


	<van-popup v-model="show">
		
		请问您是否确定删除?

		<van-button color="blue" @click="ok">是的</van-button> / <van-button @click="cancel" color="orange">取消</van-button>

	</van-popup>


	<van-button color="green" @click="get_data">查询文件列表</van-button>


	<table width="100%" border="2" style="padding:3rem;">
			
			<tr> <td>文件名</td> <td>操作</td> </tr>

			<tr v-for="item,index in filelist">


				<td> <van-field v-model="item[0]" @blur="edit(item[0])"  />  </td>

				<td>
					
					<van-button color="red" @click="del(item[0],index)" >删除</van-button>


					<van-button color="blue" @click="download(item[0])"  >文件下载</van-button>

				</td>
				

			</tr>


	</table>

	



</div>
</template>


<script>


//导入其他组件
import myheader from './myheader.vue';



export default{

	//声明组件
	components:{

		'myheader':myheader,
		
	},
	//声明变量
	data(){

		return {

			filelist:[],
			// 选项列表名
			option1:[ {text:"文件名",value:0},{text:"后缀",value:1} ],
			//排序类型
			option2:[ {text:"正序",value:0},{text:"倒序",value:1} ],
			// 默认排序
			mysort:0,
			//默认排序方式
			myorder:0,
			//弹窗
			show:false

		}


	},
	//自定义过滤器
	filters:{

			myfilter:function(value){


				value = value.slice(0,3);

				return value + "********";


			}

	},
	//初始化方法
	mounted(){

		this.get_data();
		
	},
	//声明方法
	methods:{

		//修改方法
		edit:function(filename){

			console.log(filename);

		},
		//下载方法
		download:function(filename){

			window.location.href = "http://localhost:5000/download/?id="+localStorage.getItem("id")+"&filename=" + filename;

		},
		//确认删除
		ok:function(){

			console.log(window.filename);


			this.axios.delete(
				'http://localhost:5000/delfile/',{

					params:{

						id:localStorage.getItem("id"),
						filename:window.filename
					}

				}).then((result) =>{

					if(result.data.code === 200){

						this.show = false;

						this.$toast.success("删除成功");

						//刷新页面
						//window.location.reload();

						//动态删除
						this.filelist.splice(window.delindex,1);

					}

			});


		},
		//取消
		cancel:function(){


			this.show = false;

		},
		//删除方法
		del:function(filename,index){


			console.log(filename);
			console.log(index)

			window.delindex = index;

			//全局变量传递
			window.filename = filename;


			this.show = true;


		},
		//封装请求接口
		get_data:function(){


			var back = "False";
			var reverse = "False";
			var back_reverse = "False";


			if(this.mysort === 1 ){

				back = "True";

			}

			if(this.myorder === 1){

				reverse = "True";
				back_reverse = "True";

			}


			//发送请求
			this.axios.get(
				'http://localhost:5000/filelist/',{

					params:{

						id:localStorage.getItem("id"),
						reverse:reverse,
						back:back,
						back_reverse:back_reverse
					}

				}).then((result) =>{

					console.log(result);

					this.filelist = result.data;

				

			});



		}

	

		


	}


}
	


</script>


<style>

.on { background:purple }
.off {background:orange }

</style>